<template>
  <div class="content">
    <div
      ref="charts"
      style="width: 800px; height: 600px;margin:0 auto;"
    />
  </div>
</template>

<script>
import axios from 'axios'
import * as Echarts from 'echarts'
import { option, getData } from '@/views/dashboard/components/map/map'

export default {
  name: 'VueAdminTemplateMasterSheng2',

  data() {
    return {
      list: []
    }
  },
  created() {
    this.getpeiData()
  },
  mounted() {
    Echarts.registerMap('丹东', getData())
    this.echarts = Echarts.init(this.$refs.charts)
    this.echarts.setOption(option)
    this.time = setInterval(() => {
      this.getpeiData()
    }, 3000)
  },
  destroyed() {
    clearInterval(this.time)
    this.time = null
  },

  methods: {
    async getpeiData() {
      const { data } = await axios.get('/mock/echarts/map')
      // console.log(data)
      this.list = data.data.title
      // console.log(option.series[0].data[0].name)
      this.list.map((item, index) => {
        // console.log(option.series[2].data)
        option.series[2].data[index].name = item.title
        // option.series[0].data[0].value = item.count
      })
      this.echarts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
